<!--
 * @Author: licongwei
 * @Date: 2022-03-16 16:53:41
 * @FileDescription: 商超接入数据量情况
-->
<template>
  <div class="scjrsjlqk">
    <com-box :title="title">
      <template v-slot>
        <charts :params="params"></charts>
      </template>
    </com-box>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
interface IState {
  title: string
  params: any
  getData: () => void
}
export default defineComponent({
  name: 'scjrsjlqk',
  components: {
    comBox
  },
  setup() {
    const state: IState = reactive({
      title: '',
      params: {
        loading: true,
        map: {},
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          legend: {
            top: 5,
            right: 10,
            itemWidth: 10,
            itemHeight: 10
          },
          grid: {
            top: '20%',
            bottom: 60
          },
          yAxis: [
            {
              name: '单位',
              position: 'left'
            }
          ],
          series: [
            {
              type: 'bar',
              itemStyle: {
                color: ['#ef4f24', '#fff511', '#08EEF1', '#F8B551']
              },
              label: {
                show: false
              },
              barWidth: 12
            }
          ]
        }
      },
      getData: () => {
        state.params.loading = true
        httpRequest
          .get({ url: 'M3P1Scjrsjlqk' })
          .then((res) => {
            state.title = res.title
            state.params.options.dataset.dimensions = [
              'name',
              ...Object.keys(res.map)
            ]
            state.params.map = res.map
            state.params.options.yAxis[0].name = `单位: ${res.unit}`
            state.params.options.dataset.source = res.data
            state.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    state.getData()
    return {
      ...toRefs(state)
    }
  }
})
</script>
<style lang="less" scoped>
.scjrsjlqk {
  height: 100%;
}
</style>
